<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精品示范</title>
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css"/>
    <!-- Demo styles -->
    <style>
      a{text-decoration: none; color: #000;}
      img{display: block; width: 100%; display: block;}
      *{margin: 0; padding: 0;}
      /* banner */
      /* Swiper */
      #banner{position: relative; height: 700px;}
      .swiper {width: 100%; height: 100%;}
      .swiper-slide {text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center;align-items: center; }
      .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
      /* 导航 */
      .banner{position: absolute; top: 0; z-index: 2; width: 100%;}
      #rightbanner{width: 20%; margin-left: 15%; float: left;}
      .rightbanner{width: 60px; height: 60px;}
      .banner nav{float: left; width: 60%; border-top: 1px #A8BFA7 solid; border-bottom: 1px #A8BFA7 solid; line-height: 50px; margin: 30px 0;}
      .banner nav a{float: left; width: 15%; text-align: center; display: block; color: #FFF;}
      .banner nav a:hover{color: #000;}
      .banner nav a:nth-child(2){color: #000;}
      /* banner中间字 */
      #bannerWord{position: absolute; top: 200px; margin-left: 25%; text-align: right; z-index: 2; width: 50%; color: #fff;}
      .bannerOne{font-size: 3rem;}
      .bannerTwos{margin-top: 30px;}
      .bannerThree{background-color: #fff; color: #406A30; margin-top: 30px; display: block; width: 15%; line-height: 40px; border-radius: 20px; float: right; text-align: center;}
      /* banner下面的列表 */
      #bannerFour{width: 60%; margin-left: 20%; position: absolute; bottom: -110px; z-index: 2;}
      .four{width: 20%; margin-right: 5%; background-color: #FBFAF5; float: left; text-align: center; height: 220px;}
      .four:last-child{margin-right: 0;}
      .fourImg{width: 70%; margin-left: 15%; padding-top: 40px; margin-bottom: 10px;}
      .fourChina{font-size: 1.2rem;}
      .fourHang{width: 30%; height: 2px; margin-left: 35%; background-color: #7F7F7D; margin-top: 20px;}
      /* middle */
      #middle{background-color: #FBFAF5; height: 3000px;}
      /* middle第一个 */
      .middleOne{width: 100%; padding: 160px 0 50px 0; height: 650px;}
      .middleOneLeft{width: 50%; float: left; height: 600px;}
      .middleOneRight{width: 40%; float: left; margin-left: 3%;}
      .middleOneRightOne{color: #B8B7B3; font-size: 4rem;}
      .middleOneRightTwo{font-size:3rem; color: #363636; margin-bottom: 20px;}
      .middleOneRightThree{color: #A8A7A3}
      .middleOneRightFour{margin-top: 20px; margin-bottom: 20px; width: 100px; background-color: #82A27D; line-height: 2.5rem; display: block; color: #fff; text-align: center;}
      .middleOneRightImg{width: 90%;}
      .middleOneRightImgs{width: 30%; margin-right: 5%; float: left; height: 200px;}
      .middleOneRightImgs:last-child{margin-right: 0;}
      /* middle第二个 */
      #middleTwo{width: 100%; background-color: #484854; height: 200px;}
      .input{margin-left: 10%; padding-top: 70px;}
      .inputOne,.inputTwo{font-size: 20px; border: none; outline: none; height: 3rem; line-height: 3rem; width: 20%;}
      .inputOne{padding: 0 10px;}
      .inputTwo{width: 5%; margin-left: -5px; background-color: #000; color: #FFF;}
      .cao{width: 200px; margin-left: 43%; margin-top: -180px; border-radius: 50%;}
      .middleTwo-three{margin-left: 60%; width: 30%; margin-top: -90px; color: #fff;}
      .three-one{text-align: center; font-size: 2rem; margin-bottom: 20px;}
      /* middle第三个 */
      #middleThree{width: 100%; margin-top: 50px; height: 500px;}
      .middle-left{width: 30%; float: left;}
      .middleThree{width: 95%; margin: 0 auto;}
      .middle-left-one{height: 125px; position: relative; background-color: #F0EEEF;}
      .middle-left-one:nth-child(2n){background-color: #FBFAF5;}
      .middle-left-one-img{margin-left: 30px; width: 50px; height: 50px; position: absolute; top: 37px;}
      .middle-left-one-xia-pthree{margin-left: 100px; font-size: 0.6rem;}
      .middle-left-one-xia-pthree p:first-child{font-size: 1.2rem; padding: 30px 0 10px 0;}
      .middle-left-one:hover{color: #FFF; background-color: #82A481;}
      .middle-right{width: 70%; float: right; position: relative;}
      .middle-right-da{width: 100%; height: 500px;}
      .middle-right-xiao{width: 80%; margin: 0 auto; position: absolute; bottom: -75px; margin-left: 10%;}
      .middle-right-xiaos{width: 30%; height: 150px; float: left; margin-right: 5%;}
      .middle-right-xiaos:last-child{margin-right: 0;}
      /* 精选产品middle第四个前奏 */
      #jingpin{margin: 200px 0 50px 0; height: 100px; text-align: center; font-size: 0.9rem;}
      #jingpin p:first-child{font-size: 3rem; margin-bottom: 10px;}
      /* middle第四个 */
      #middleFour{width: 100%;}
      .middleFour{width: 80%; margin: 0 auto;}
      .middle-four-left{width: 50%; float: left;}
      .middle-four-left-one{width: 45%; margin-right: 5%;float: left;}
      .middle-four-left-one-img{height: 300px;}
      .xiao-word{text-align: center; background-color: #FFFFFF; line-height: 40px; margin-top: -30px;}
      .xiao-word p:first-child{font-size: 1.1rem;}
      .middle-four-left-one-a{width: 100%; display: block; line-height: 3rem; text-align: center;}
      .middle-four-left-one-a:hover{background-color: #82A481; color: #FFF;}
      .middle-four-right{width: 40%; color: #868581; font-size: 0.9rem; float: left; border: #ACC1A8 5px solid; box-sizing: border-box; height: 800px; padding: 100px 40px;}
      .middle-four-right p:first-child{font-size: 2rem; color: #3C3C3B;margin-bottom: 20px;}
      .middle-four-right p:nth-child(2){color: #444444; font-size: 1.3rem; margin-bottom: 10px;}
      .middle-four-right a{display: block; margin-top: 30px; color: #4B4949;}
      .safa{width: 600px; position: relative; bottom: 400px; left: 1000px;}
      /* 尾部 */
      #footer{background-color: #2B2B2B; color: #fff;}
      .footer{text-align: center; line-height: 4rem; height: 4rem;}
      #foot{background-color: #373737; height: 300px; width: 100%;}
      .foot{width: 70%; margin: 0 auto;}
      .footleft{width: 15%; padding: 30px 0; float: left;}
      .footleft a{display: block; color: #fff; line-height: 2rem;}
      .footleft a:first-child{font-size: 1.2rem; line-height: 3rem;}
      .footleft img{width: 130px; padding: 30px 0;}
      .footleft p{color: #fff;}
      .footright{padding: 60px 0;}
      .footright p{color: #fff;}
      .footright p:nth-child(2){font-size: 2rem; line-height: 5rem;}
    </style>
  </head>
  <body>
    <!-- banner -->
    <div id="banner">
      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="bannerImg" src="./img/1629439745224.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img class="bannerImg" src="./img/1629439730162.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img class="bannerImg" src="./img/1629369967305.jpg" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <!-- 导航 -->
      <div class="banner">
        <div id="rightbanner">
          <img class="rightbanner" src="./img/jia.png" alt="">
        </div>
        <nav>
          <a href="./index.html">首页</a>
          <a href="./Two.html">精品示范</a>
          <a href="./Three.html">装修风格</a>
          <a href="./Four.html">产品展示</a>
          <a href="./Five.html">家装定制</a>
          <a href="./Six.html">关于我们</a>            
        </nav>
      </div>
      <!-- banner中间字 -->
      <div id="bannerWord">
        <div class="bannerWord">
          <p class="bannerOne">舒适家居，从这里开始</p>
          <p class="bannerOne">COMFORT ABLE</p>
          <p class="bannerOne">HOME</p>
          <p class="bannerTwo bannerTwos">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
          <p class="bannerTwo">tempor incididunt utlabore et dolore magna aliqua.</p>
          <a class="bannerThree" href="#">联系我们</a>
        </div>
      </div>
      <!-- banner下面的列表 -->
      <div id="bannerFour">
        <div class="bannerFour">
          <div class="four">
            <img class="fourImg" src="./img/twoone.png" alt="">
            <p class="fourChina">卧室家具</p>
            <p class="fourEnight">bedroom</p>
            <div class="fourHang"></div>
          </div>
          <div class="four">
            <img class="fourImg" src="./img/twotwo.png" alt="">
            <p class="fourChina">精制家具</p>
            <p class="fourEnight">refined</p>
            <div class="fourHang"></div>
          </div>
          <div class="four">
            <img class="fourImg" src="./img/twothree.png" alt="">
            <p class="fourChina">柜子</p>
            <p class="fourEnight">cabinet</p>
            <div class="fourHang"></div>
          </div>
          <div class="four">
            <img class="fourImg" src="./img/twofour.png" alt="">
            <p class="fourChina">灯饰</p>
            <p class="fourEnight">lamp</p>
            <div class="fourHang"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- middle -->
    <div id="middle">
      <!-- middle第一个 -->
      <div class="middleOne">
        <img class="middleOneLeft" src="./img/twofive.png" alt="">
        <div class="middleOneRight">
          <p class="middleOneRightOne">jREE</p>
          <p class="middleOneRightTwo">生活必须来点绿</p>
          <p class="middleOneRightThree">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
          <p class="middleOneRightThree">sed do eiusmod</p>
          <p class="middleOneRightThree">tempor incididunt utlabore et dolore magna aliqua.</p>
          <a href="#" class="middleOneRightFour">搭配示范</a>
          <div class="middleOneRightImg">
            <img class="middleOneRightImgs" src="./img/twosix.png" alt="">
            <img class="middleOneRightImgs" src="./img/twosix.png" alt="">
            <img class="middleOneRightImgs" src="./img/twosix.png" alt="">
          </div>
        </div>
      </div>
      <!-- middle第二个 -->
      <div id="middleTwo">
        <div class="input">
          <input class="inputOne" type="text">
          <input class="inputTwo" type="submit" value="搜索">          
        </div>
        <img class="cao" src="./img/cao.jfif" alt="">
        <div class="middleTwo-three">
          <p class="three-one">绿 / 色 / 小 / 屋 /</p>
          <p class="three-two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
          <p class="three-two">tempor incididunt utlabore et dolore magna aliqua.</p>
        </div>
      </div>
      <!-- middle第三个 -->
      <div id="middleThree">
        <div class="middleThree">
          <div class="middle-left">
            <div class="middle-left-one">
              <img class="middle-left-one-img" src="./img/jia.png" alt="">
              <div class="middle-left-one-xia-pthree">
                <p>卧室精装示范</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>sed do eiusmod tempor</p>
              </div>
            </div>
            <div class="middle-left-one">
              <img class="middle-left-one-img" src="./img/jia.png" alt="">
              <div class="middle-left-one-xia-pthree">
                <p>客厅精装示范</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>sed do eiusmod tempor</p>
              </div>
            </div>
            <div class="middle-left-one">
              <img class="middle-left-one-img" src="./img/jia.png" alt="">
              <div class="middle-left-one-xia-pthree">
                <p>书房精装示范</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>sed do eiusmod tempor</p>
              </div>
            </div>
            <div class="middle-left-one">
              <img class="middle-left-one-img" src="./img/jia.png" alt="">
              <div class="middle-left-one-xia-pthree">
                <p>洗手间精装示范</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>sed do eiusmod tempor</p>
              </div>
            </div>
          </div>
          <div class="middle-right">
            <img class="middle-right-da" src="./img/162943931115.jpg" alt="">
            <div class="middle-right-xiao">
              <img class="middle-right-xiaos" src="./img/1629368651386.jpg" alt="">
              <img class="middle-right-xiaos" src="./img/1629368651386.jpg" alt="">
              <img class="middle-right-xiaos" src="./img/1629368651386.jpg" alt="">
            </div>
          </div>
        </div>
      </div>
      <!-- 精选产品middle第四个前奏 -->
      <div id="jingpin">
        <p>精选产品</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
        <p>sed do eiusmod</p>
        <p>tempor incididunt utlabore et dolore magna aliqua.</p>
      </div>
      <!-- middle第四个 -->
      <div id="middleFour">
        <div class="middleFour">
          <div class="middle-four-left">
            <div class="middle-four-left-one">
              <img class="middle-four-left-one-img" src="./img/1491976505597.jpg" alt="">
                <div class="xiao-word">
                  <p>简欧百搭沙发</p>
                  <p>JANE THE JOKER SOFA</p>
                </div>
              <a class="middle-four-left-one-a" href="#">了解详情> </a>
            </div>
            <div  class="middle-four-left-one">
              <img class="middle-four-left-one-img" src="./img/1491977955506.jpg" alt="">
                <div class="xiao-word">
                  <p>简欧百搭茶几</p>
                  <p>JANE THE JOKER SOFA</p>
                </div>
              <a class="middle-four-left-one-a" href="#">了解详情> </a>
            </div>
            <div class="middle-four-left-one">
              <img class="middle-four-left-one-img" src="./img/1491978566509.jpg" alt="">
                <div class="xiao-word">
                  <p>简欧百搭木柜</p>
                  <p>JANE THE JOKER SOFA</p>
                </div>
              <a class="middle-four-left-one-a" href="#">了解详情> </a>
            </div>
            <div class="middle-four-left-one">
              <img class="middle-four-left-one-img" src="./img/1491979488770.jpg" alt="">
                <div class="xiao-word">
                  <p>简欧百搭沙发</p>
                  <p>JANE THE JOKER SOFA</p>
                </div>
              <a class="middle-four-left-one-a" href="#">了解详情> </a>
            </div>
          </div>
          <div class="middle-four-right">
            <p>简欧百搭沙发</p>
            <p>JANE THE JOKER SOFA</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
            <p>sed do eiusmod</p>
            <p>tempor incididunt utlabore et dolore magna aliqua.Lorem</p>
            <p>ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
            <p>eiusmod</p>
            <p>tempor incididunt utlabore et dolore magna aliqua.</p>
            <a href="#">点击了解></a>
          </div>
        </div>
        <!-- <img class="safa" src="./img/shafa.png" alt=""> -->
      </div>
    </div>
    <!-- 尾部 -->
    <div id="foot">
      <div class="foot">
        <ul class="footleft">
          <a href="#">关于我们</a>
          <a href="#">企业介绍</a>
          <a href="#">联系我们</a>
          <a href="#">企业招聘</a>
        </ul>
        <ul class="footleft">
          <a href="#">案例展示</a>
          <a href="#">工地鉴赏</a>
          <a href="#">装修实景</a>
          <a href="#">精品案例</a>
        </ul>
        <ul class="footleft">
          <a href="#">装修服务</a>
          <a href="#">新房装修</a>
          <a href="#">老房改造</a>
          <a href="#">别墅大宅</a>
          <a href="#">皇冠工程</a>
        </ul>
        <div class="footleft">
          <img src="./img/erweima.png" alt="">
          <p>免费领取户型规划</p>
        </div>
        <div class="footright">
          <p>全国服务热线:</p>
          <p>400- 888-8888</p>
          <p>地址:中国(. 上海)自由贸易试验区碧波路690号1幢402- 1室</p> 
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="footer">绿色小屋装饰有限公司版权所有C2021 (沪)xxx证xXXxx号 使用前必读</div>
    </div>
    
    <!-- Swiper JS -->
    <script src="./js/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        loop:true,
        direction: "vertical",
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
    delay: 2500,  // 多长时间进行一次自动切换
    disableOnInteraction: false,  // 用户点击一次后是否取消自动切换 默认true
  },
  speed: 300, // 切换速度
      });
    </script>
  </body>
</html>